<template>
    <div style="background: #f2d984;">
        <el-button style="color: black; float: left; margin: 0 30px; font-size: 1.5em;" type="text"
                   @click="$router.push('/admin')">
            编辑
        </el-button>
        <el-button style="color: black; float: left; font-size: 1.5em;" type="text"
                   @click="$router.push('/add')">
            新增
        </el-button>
        <div class="block">
            <el-image :src="src" style="width: 100%;"></el-image>
        </div>
        <br>
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick" style="margin: 0 20px; font-size: 1.4em;">
                <el-tab-pane label="游戏资料" name="second">
                    <div>
                        <table cellpadding="1" cellspacing="" border="1"
                               style="margin: 0 auto;width: 90%; font-size: 1.1em; text-align: center; color: black;">
                            <tr>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>身份</th>
                                <th colspan="3">主题诗词</th>
                            </tr>
                            <tr v-for="(item, index) in data" :key="index">
                                <td>{{ item.name }}</td>
                                <td>{{ item.gender }}</td>
                                <td>{{ item.identity }}</td>
                                <td colspan="3">{{ item.poetry }}</td>
                            </tr>
                        </table>
                    </div>
                    <br>
                    <el-image :src="src1" style="width: 20%;"></el-image>
                    <el-image :src="src2" style="width: 20%;"></el-image>
                    <el-image :src="src3" style="width: 20%;"></el-image>
                    <el-image :src="src4" style="width: 20%;"></el-image>
                    <div class="end" style="padding: 80px 0">
                        <el-carousel :interval="2000" type="card" height="460px" :autoplay="true">
                            <el-carousel-item v-for="(item, index) in img" :key="index">
                                <el-image :src="item.imgs"></el-image>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="精彩图片" name="first">
                    <div style="width: 1600px; margin: 50px auto;">
                        <div class="block" v-for="(item, index) in dataSrc" :key="index" style="display: inline-block;">
                            <el-image
                                    style="width: 400px; height: 400px"
                                    :src="item.date">
                            </el-image>
                        </div>
                    </div>
                    <br><br><br><br><br><br>
                </el-tab-pane>
                <el-tab-pane label="游戏音乐" name="third">
                    <div style="width: 1600px; margin: 20px auto 50px;">
                        <div style="height: 380px; width: 380px; display:inline-block;background: url(http://www.2436junhao.shop:8090/image/20.jpeg)">
                            <audio src="http://www.2436junhao.shop:8090/musi/在忠 - Super Star (烟嗓版).mp3"
                                   controls="controls" style="opacity: 0.5;"></audio>
                        </div>
                        <div style="height: 380px; width: 380px; display:inline-block;  background: url(http://www.2436junhao.shop:8090/image/18.jpeg)">
                            <audio src="http://www.2436junhao.shop:8090/musi/青鸟飞鱼-此生不换 (《仙剑奇侠传三》主题曲)(标清).mp3"
                                   controls="controls" style="opacity: 0.5;"></audio>
                        </div>
                        <div style="height: 380px; width: 380px; display:inline-block;  background: url(http://www.2436junhao.shop:8090/image/19.jpeg)">
                            <audio src="http://www.2436junhao.shop:8090/musi/胡歌-逍遥叹 (《仙剑奇侠传》电视剧插曲)(超清).mp3"
                                   controls="controls" style="opacity: 0.5;"></audio>
                        </div>
                        <div style="height: 380px; width: 380px; display:inline-block; background: url(http://www.2436junhao.shop:8090/image/22.jpeg)">
                            <audio src="http://www.2436junhao.shop:8090/musi/胡歌-忘记时间 (KTV版) (《仙剑奇侠传3》片尾曲)(标清).mp3"
                                   controls="controls" style="opacity: 0.5;"></audio>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="精彩视频" name="fourth">
                    <h1 style="float: left; margin: 0 50px 10px;color: red;">宣 传 视 频</h1>
                    <div style="width: 1800px; margin: 0 auto;">
                        <div style="height: 100%; width: 100%;margin: 0px 20px; display:inline-block;">
                            <video width="100%" height="100%" controls>
                                <source src="http://www.2436junhao.shop:8090/mv/《仙剑奇侠传7试玩版》 片段 (0).mp4"
                                        type="video/mp4">
                                您的浏览器不支持Video标签。
                            </video>
                        </div>
                        <div style="height: 550px; width: 550px;display:inline-block;">
                            <h2 style="color: #fa3636; position: relative; top: 75px; right: 212px;">游 戏 片 段</h2>
                            <video width="100%" height="94%" controls>
                                <source src="http://www.2436junhao.shop:8090/mv/【仙剑奇侠传一】将彩依化蝶片段换成慢版蝶恋 (0).mp4"
                                        type="video/mp4">
                                您的浏览器不支持Video标签。
                            </video>
                        </div>
                        <div style="height: 550px; width: 550px;margin: 0px 20px; display:inline-block;">
                            <video width="100%" height="100%" controls>
                                <source src="http://www.2436junhao.shop:8090/mv/仙剑奇侠传一 游戏故事片段1 遥灵初见 (0).mp4"
                                        type="video/mp4">
                                您的浏览器不支持Video标签。
                            </video>
                        </div>
                        <div style="height: 550px; width: 550px; display:inline-block;">
                            <video width="100%" height="100%" controls>
                                <source src="http://www.2436junhao.shop:8090/mv/仙剑奇侠传一 游戏故事片段2  回到余杭镇，拜师酒剑仙，遥灵重逢 (0).mp4"
                                        type="video/mp4">
                                您的浏览器不支持Video标签。
                            </video>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
    export default {
        name: "",
        data() {
            return {
                src: 'http://www.2436junhao.shop:8090/hd.jpg',
                src1: 'http://www.2436junhao.shop:8090/人物1.png',
                src2: 'http://www.2436junhao.shop:8090/人物2.png',
                src3: 'http://www.2436junhao.shop:8090/人物3.png',
                src4: 'http://www.2436junhao.shop:8090/人物4.png',
                data: {},
                activeName: 'second',
                dataSrc: [
                    {date: 'http://www.2436junhao.shop:8090/image/10.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/11.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/12.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/13.jpg'},
                    {date: 'http://www.2436junhao.shop:8090/image/14.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/15.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/16.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/17.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/18.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/19.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/20.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/21.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/22.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/23.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/24.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/25.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/26.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/27.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/28.jpeg'},
                    {date: 'http://www.2436junhao.shop:8090/image/29.jpeg'},
                ],
                img: [
                    {imgs: 'http://www.2436junhao.shop:8090/ts-1.jpg'},
                    {imgs: 'http://www.2436junhao.shop:8090/ts-2.jpg'},
                    {imgs: 'http://www.2436junhao.shop:8090/ts-3.jpg'},
                    {imgs: 'http://www.2436junhao.shop:8090/ts-4.jpg'},
                    {imgs: 'http://www.2436junhao.shop:8090/ts-5.jpg'},
                ]
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.$axios.get('/api/mybatis/CharacterList').then(res => {
                    this.data = res.data.data;
                })
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
        }
    }
</script>
<style lang="scss" scoped>
  @import "../css/index.css";
</style>